<template>
	<view class="page">
		<view class="flex gap-sm bg-white padding">
			<u-avatar src="https://picsum.photos/200/300?random=100" mode="aspectFill" size="120rpx">
			</u-avatar>
			<view class="flex-1">
				<u-text text="张三（在读）女" size="36rpx" color="#333"></u-text>
				<u-text margin="10rpx 0 0 0" text="联系电话：13052808068（爸爸）" size="24rpx" color="#999"></u-text>
			</view>
		</view>
		<view class="main">
			<view>
				<up-calendar :showConfirm="false" :confirmText="null" :showTitle="false" color="#004BB3" round="30rpx"
					:pageInline="true" :show="true"></up-calendar>
			</view>
			<Card class="margin-top" title="2025-04-21" :more="false">
				<view class="flex align-center justify-between margin-top">
					<text class="point"></text>
					<u-text text="签到时间：" size="32rpx" color="#333"></u-text>
					<u-text align="right" text="17:30" size="32rpx" color="#333"></u-text>
				</view>
				<u-divider></u-divider>
				<view class="flex align-center justify-between">
					<text class="point"></text>
					<u-text text="签退时间：" size="32rpx" color="#333"></u-text>
					<u-text align="right" text="18:30" size="32rpx" color="#333"></u-text>
				</view>
			</Card>

			<Card class="margin-top" title="请假原因" :more="false">
				<view class="margin-top-sm">
					<text class="text-df text-muted">张三老师：</text>
					<text class="text-df text-gray">生病了，需要请假</text>
				</view>
				<view class="margin-top-sm">
					<image class="radius-lg" src="https://picsum.photos/200/300?random=100" mode="aspectFill"
						style="width: 160rpx;height: 160rpx;">
					</image>
				</view>
			</Card>
		</view>
	</view>
</template>

<script setup>
import Card from '@/components/Card/index.vue';
</script>

<style lang="scss" scoped>
.point {
	width: 10rpx;
	height: 10rpx;
	background: #0060E6;
	border-radius: 50%;
	margin-right: 10rpx;
}
</style>
